<template>
    <div class="page">
        <p>折线图</p>
        <div id="container"></div>
    </div>
</template>
<script>
import * as d3 from "d3"
export default {
    data() {
        return {
            dataset: [
                {
                    country: "china",
                    gdp: [
                        [2000, 11920],
                        [2001, 13170],
                        [2002, 14550],
                        [2003, 16500],
                        [2004, 19440],
                        [2005, 22870],
                        [2006, 27930],
                        [2007, 35040]
                    ]
                },
                {
                    country: "japan",
                    gdp: [
                        [2000, 47310],
                        [2001, 41590],
                        [2002, 39800],
                        [2003, 43020],
                        [2004, 46550],
                        [2005, 45710],
                        [2006, 43560],
                        [2007, 48490]
                    ]
                }
            ]
        }
    },
    methods: {
        draw() {
            //定义svg里面作图的时候四周边界的padding值
            let padding = { top: 50, bottom: 50, left: 50, right: 50 },
                gdpMax = 0,
                svgWidth = 1000,
                svgHeight = 600
            //使用d3创建一个svg元素
            this.svg = d3
                .select("#container")
                .append("svg")
                .attr("width", svgWidth)
                .attr("height", svgHeight)
            //计算出数据中的最大值，画Y轴的时候需要
            for (let item of this.dataset) {
                let temp = d3.max(item.gdp, d => d[1])
                if (temp > gdpMax) {
                    gdpMax = temp
                }
            }
            //定义比例尺和坐标轴
            let xScale = d3
                    .scaleLinear()
                    .domain([2000, 2007])
                    .range([0, svgWidth - padding.left - padding.right]),
                yScale = d3
                    .scaleLinear()
                    .domain([0, gdpMax])
                    .range([svgHeight - padding.top - padding.bottom, 0]),
                xAxis = d3
                    .axisBottom(xScale)
                    .ticks(5)
                    .tickFormat(d3.format("d")),
                yAxis = d3.axisLeft(yScale)
            this.svg
                .append("g")
                .attr(
                    "transform",
                    `translate(${padding.left},${svgHeight - padding.bottom})`
                )
                .call(xAxis)
            this.svg
                .append("g")
                .attr("transform", `translate(${padding.left},${padding.top})`)
                .call(yAxis)
            // yScale.range([0, svgHeight - padding.top - padding.bottom])
            //定义线段生成器
            let linePath = d3
                    .line()
                    .curve(d3.curveCatmullRom.alpha(1))
                    .x(d => xScale(d[0]))
                    .y(d => yScale(d[1])),
                colors = [d3.rgb(0, 0, 255), d3.rgb(0, 255, 0)]
            this.svg
                .selectAll("path.linePath")
                .data(this.dataset)
                .enter()
                .append("path")
                .attr("d", d => linePath(d.gdp))
                .attr("transform", `translate(${padding.left},${padding.top})`)
                .attr("fill", "none")
                .attr("stroke-width", 3)
                .attr("stroke", (d, i) => colors[i])
            let eleLegend = this.svg
                .append("g")
                .attr(
                    "transform",
                    `translate(${padding.left},${svgHeight -
                        padding.bottom +
                        30})`
                )
            eleLegend
                .selectAll("rect")
                .data(this.dataset)
                .enter()
                .append("rect")
                .attr("fill", (d, i) => colors[i])
                .attr("width", 20)
                .attr("height", 20)
                .attr("transform", (d, i) => `translate(${i * 50},0)`)
            eleLegend
                .selectAll("text")
                .data(this.dataset)
                .enter()
                .append("text")
                .text(d => d.country)
                .attr("x", (d, i) => {
                    return 20 + i * 50
                })
                .attr("y", 15)
        },
        test() {
            function textToByteArray(text) {
                let blob = new Blob([text], { type: "text/plain" })
                let reader = new FileReader()
                let done = function() {}

                reader.onload = event => {
                    done(new Uint8Array(event.target.result))
                }
                reader.readAsArrayBuffer(blob)

                return {
                    done: function(callback) {
                        done = callback
                    }
                }
            }

            function byteArrayToText(bytes, encoding) {
                let blob = new Blob([bytes], {
                    type: "application/octet-stream"
                })
                let reader = new FileReader()
                let done = function() {}

                reader.onload = event => {
                    done(event.target.result)
                }

                if (encoding) {
                    reader.readAsText(blob, encoding)
                } else {
                    reader.readAsText(blob)
                }

                return {
                    done: function(callback) {
                        done = callback
                    }
                }
            }

            let text = "你好"
            textToByteArray(text).done(bytes => {
                console.log(bytes)
                byteArrayToText(bytes, "UTF-8").done(text => {
                    console.log(text) // 💩 = ♡
                })
            })
        }
    },
    mounted() {
        // this.draw()
        this.test();
    }
}
</script>
